<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
    <el-form-item label="项目名称" prop="nickName">
      <el-select v-model="projectId" clearable placeholder="请选择项目名称" @change="submit">
        <el-option
          v-for="item in projectOptions"
          :key="item.projectId"
          :label="item.projectName"
          :value="item.projectId"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <div class="qrcode" ref="qrCodeUrl"></div>
    </el-form-item>
  </el-form>
</template>

<script>
  import { listAllProject } from "@/api/bmxt/project";
  import QRCode from 'qrcodejs2'
  export default {
    name: 'popularizeCode',
    props: {
      user: {
        type: Object
      }
    },
    data(){
      return {
        qrcode: undefined,
        queryParams: {
          pageNum: 1,
          pageSize: 1000,
          projectName: null,
        },
        projectOptions: [],
        projectId: null,
        // 表单校验
        rules: {
          nickName: [
            { required: true, message: "用户昵称不能为空", trigger: "blur" }
          ],
          email: [
            { required: true, message: "邮箱地址不能为空", trigger: "blur" },
            {
              type: "email",
              message: "请输入正确的邮箱地址",
              trigger: ["blur", "change"]
            }
          ],
          phonenumber: [
            { required: true, message: "手机号码不能为空", trigger: "blur" },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ]
        }
      }
    },
    methods:{
      submit(value) {
        // 拿到这个对象
        this.$refs.qrCodeUrl.innerHTML = "";
        let project = this.projectOptions.find(item => item.projectId == value )
        let address = project.projectPopularizeAddress+"?invitationCode="+this.user.userId;
        console.log("生成的推广地址是：",address)
        this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: address, // 需要转换为二维码的内容
          colorDark: '#000000',
          colorLight: '#ffffff',
          width: 200,
          height:  200,
          correctLevel: QRCode.CorrectLevel.H
        })
      },
      close() {
        this.$tab.closePage();
      }
    },
    created() {
      listAllProject(this.queryParams).then(resp=>{
        if(resp.code == 200){
          this.projectOptions = resp.data;
        }
      })
    }
  }
</script>

<style scoped>
  .qrcode  img:last-child{
    width: 4rem;
    height: 4rem;
  }
  [alt='Scan me!']{
    width: 4rem;
    height: 4rem;
  }
</style>
